<template>
  <div style="margin: 1%  2%">
    <el-form :inline="true" :model="searchMap" class="demo-form-inline">
      <el-form-item label="所属分类">
        <el-cascader
        v-model="searchMap.cid"
        :options="options"
        :show-all-levels="false"
        ></el-cascader>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="search">查询</el-button>
      </el-form-item>
    </el-form>

    
    
    <el-table
        :data="list"
        border
        style="width: 100%"
        >
        
        <!-- <el-table-column
        prop="id"
        label="试卷id"
        min-width="3%"
        >
        </el-table-column> -->
        
        <el-table-column
        prop="name"
        label="试卷名称"
        min-width="10%">
        </el-table-column>

        <el-table-column
        prop="categoryName"
        label="所属分类"
        min-width="10%">
        </el-table-column>
        
        <el-table-column
        prop="creatTime"
        label="创建时间"
        min-width="12%"
        >
            <template slot-scope="scope">
            <span style="margin-left: 3px">{{ scope.row.creatTime }}</span>
            </template>
        </el-table-column>

        <el-table-column
        prop="reviseTime"
        label="修改时间"
        min-width="12%"
        >
            <template slot-scope="scope">
            <span style="margin-left: 3px">{{ scope.row.reviseTime }}</span>
            </template>
        </el-table-column>

        <el-table-column
        prop="handle"
        label="操作"
        min-width="12%"
        align="center"
        >
            <template slot-scope="scope">
                <el-button
                size="mini"
                type="info"
                @click="handleEdit(scope.row.id)">编辑</el-button>
    
                <el-button
                size="mini"
                type="danger"
                style="margin-left: 5%"
                @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
        </el-table-column>
        
    </el-table>

    <el-pagination
        background
        @size-change="fetchData"
        @current-change="fetchData"
        :current-page.sync="currentPage"
        :page-sizes="[5, 10, 15, 20]"
        :page-size.sync="pageSize"
        layout="total, prev, pager, next, sizes"
        :total="total"
        style="margin-top:2%;float: right"
        >
    </el-pagination>

  </div>
</template>


<script>
import examApi from '@/api/exam'
import categoryApi from '@/api/category'
export default {
  data(){
      return {
        list:null,
        total:0,//总记录数
        currentPage:  1,//当前页
        pageSize: 10,//每页大小
        searchMap:{},
        editVisible:false,
        value:"name",
        tabPosition: 'left',
        options: [],
        exam:{
          paper:{},
          selectList:[{}]
        }

         
      }
  },

  created(){
    this.fetchData()
    this.fetchOptions()  
  },

  methods:{

    

    editHandleClose(){ //修改弹出框回调
        this.editVisible = false
        this.$refs['exam'].resetFields()
      },

    search(){
        examApi.searchList(this.currentPage,this.pageSize,this.searchMap.cid[1]).then(response =>{
            if(response.items)
            this.list = response.items
            this.total = response.total
        })
    },

    add(){//增加题目 切换标签
            this.value = "select"
        },

    addSelect(){ //添加单选
            this.exam.selectList.push({
                name:'',
                optionA:'',
                optionB:'',
                optionC:'',
                optionD:'',
                //key: Date.now()
            })
        },

    removeSelect(select) { //移除题目
        var index = this.exam.selectList.indexOf(select)
        if (index !== -1) {
          this.exam.selectList.splice(index, 1)
        }
      },


    fetchOptions(){
      examApi.getOptions().then(response =>{
        this.options = response
      })
    },

    fetchData(){
        examApi.getPageList(this.currentPage,this.pageSize).then(response =>{
            if(response.items)
            this.list = response.items
            this.total = response.total
        })
    },

    handleEdit(id){
        this.$router.push({name:"editExam",query:{pid:id}})
        examApi.queryPaperById(id).then(response =>{
          if(response.flag){
            this.exam = response.data
            this.editVisible = true
          }
        })
    },

    // 表头样式设置
    headClass () {
    return 'text-align: center;'
    },
    // 表格样式设置
    rowClass () {
    return 'text-align: center;'
    }
  }
}
</script>

